<template>
    <div>

            <n-divider title-placement="center" style="font-size: 20px;">
                        趋势 
            </n-divider>
        
            <n-divider  title-placement="left" style="font-size: 18px;">
                        每日时长
            </n-divider>
                 
                        <div class="anaysis_Data_box" id="box1" ><div class="time_long"></div></div>
  
            <n-divider title-placement="left" style="font-size: 18px;">
                        活跃时段      
            </n-divider>
             
                        <div class="anaysis_Data_box" id="box2" ><div class="active"></div></div>
               
                
            <!-- <n-divider title-placement="left" style="font-size: 18px;">
                        历史活跃   
            </n-divider>
                        <div class="anaysis_Data_box" id="box3"><div class="time_span"></div></div> -->
            <n-divider title-placement="center" style="font-size: 20px;">
                        记录        
            </n-divider>

           
                <n-divider title-placement="left" style="font-size: 18px;">
                     记录分析        
                </n-divider>
        
                    
                        <div class="anaysis_Data_box" id="box4" ><div  class="life_data_all"></div></div>
                    </div>
</template>
<script setup>
import * as echarts from'echarts'
import { onMounted, nextTick, ref, inject } from 'vue';
import { useRoute } from 'vue-router';
import { time_long_d, time_span_d, life_data_all_c } from '../../../src/api/life_anaysis'
let useRoute_ = useRoute()
let user= inject('user')()

let time_long_data= [0, 0, 0, 0, 0, 0, 0]


let time_span=[
        { value: 0, name: '0~4' },
        { value: 0, name: '5~9' },
        { value: 0, name: '10~14' },
        { value: 0, name: '15~19' },
        { value: 0, name: '20~24' },
      ]

let time_span_data = {
  '0~3': [1,1,1,1,1,1,1,],
  '4~8': [2,2,2,2,2,2,],
  '9~13': [3,3,3,3,3,3,3,],
  '14~18': [4,4,4,4,4,4,4,],
  '19~23': [5,5,5,5,5,5,5,]
}     
let life_Data_count=[0,0,0,0]
let life_Data_count_view=10
// 时长分析
async function time_long_() {
    let myChart = echarts.init(document.querySelector('.time_long'));
    let option = {
    xAxis: {
        type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        name:'日期'
    },
    yAxis: {
        type: 'value',
        name:"时长/H"
      },
    tooltip: {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
       
        return '时长：' + String(params.value).substring(0,3);
    }
    },
  series: [
    {
      data:time_long_data,
      type: 'line'
    }
  ]
    };  

    myChart.setOption(option)
}


// 活跃分析
async function active_() { 
    let myChart = echarts.init(document.querySelector('.active'));
    let option = {
   legend: {
    top: 'bottom'
        },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
    //   dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
      tooltip: {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
       
        return  '数值：' + params.value;
    }
    },
series: [
    {
      name: '活跃分析',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
      borderRadius: 8
    }
        ,
        data: time_span
    }
  ]
};

     myChart.setOption(option)
}

// 时段分析
async function time_span_() { 

  await nextTick()

    let myChart = echarts.init(document.querySelector('.time_span'));
    let option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['0~3','4~8','9~13','14~18','19~23']
    },
    toolbox: {
        show : true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['历史周一','历史周二','历史周三','历史周四','历史周五','历史周六','历史周七']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'0~3',
            type:'bar',
            data:time_span_data['0~3']
        },
        {
            name:'4~8',
            type:'bar',
            data:time_span_data['4~8']
        },
        {
            name:'9~13',
            type:'bar',
            data:time_span_data['9~13']
        },
        {
            name:'14~18',
            type:'bar',
            data:time_span_data['14~18']
        },
        {
            name:'19~23',
            type:'bar',
           data: time_span_data['19~23'],
            
          
            // markLine : {
            //     itemStyle:{
            //         normal:{
            //             lineStyle:{
            //                 type: 'dashed'
            //             }
            //         }
            //     },
            //     data : [
            //         [{type : 'min'}, {type : 'max'}]
            //     ]
          // }

          
        }
        
    ]
};
                    



    myChart.setOption(option)
}

//记录分析
async function life_data_all_() { 
  
    let myChart = echarts.init(document.querySelector('.life_data_all'));
    let option = {
  title: {
    text: '记录类型'
      },

  legend: {
    data: ['本周']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '随笔', max: life_Data_count_view},
      { name: '生活', max: life_Data_count_view},
      { name: '日记', max: life_Data_count_view},
      { name: '食物', max: life_Data_count_view},
    ]
      },
  tooltip : {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
       
        return  '数值：' + params.value[params.componentIndex];
    }
    },
  series: [
    {
      name: '本周和上周记录分析',
      type: 'radar',
      data: [
        // {
        //   value: [0,10,20,30],
        //   name: '上周'
        // },
        {
          value: life_Data_count,
          name: '本周'
        }
      ]
    }
  ]
};


    myChart.setOption(option)
}

//习惯分析
async function life_habbit_() {
        // 通过ai回应
}








onMounted(async () => { 

  // 这是每日时长
  let pre_data1 = await time_long_d(user.value.get_user().id)
  if (pre_data1!=undefined) {
       for (var i = 0; i < pre_data1.length; i++) { 
      time_long_data[i]=(pre_data1[i].long)/(60*60)
    }
    time_long_()
  }


  // 这是span
  let pre_data2 = await time_span_d(user.value.get_user().id)
  console.log(pre_data2)
  if (pre_data2 != undefined) { 
      for (var j = 0; j < pre_data2.length; j++){ 
     time_span[j].value=pre_data2[j]
  }

    active_()
  }
  

  // 这是count
  const pre_data3 = await life_data_all_c(user.value.get_user().id);
if (pre_data3) {
    const { default: defaultVal, life, diary, food } = pre_data3;
    life_Data_count = [defaultVal, life, diary, food];
    life_Data_count_view = Math.max(...life_Data_count) * 3;
}
life_data_all_();


    life_habbit_()

  let box_=null
  // 处理视图
  if (useRoute_.query.id == 1) {
         box_=document.querySelector('#box1')
   }
  if (useRoute_.query.id == 2) {
        box_=document.querySelector('#box2')
   }
  if (useRoute_.query.id == 3) { 
        box_=document.querySelector('#box3')
  }
  if (useRoute_.query.id == 4) { 
        box_=document.querySelector('#box4')
  }
  if (useRoute_.query.id == 5) { 
        box_=document.querySelector('#box5')
  }
  box_.scrollIntoView({ behavior: 'smooth' })
})

// 暂时不需要该项
// time_span_()





</script>

<style  scoped>
.time_long{
   width: 100%;
   height: 100%;
}
.active{
   width: 100%;
   height: 100%;
}
.time_span{
   width: 100%;
   height: 100%;
}
.life_data_all{
   width: 100%;
   height: 100%;
}
.life_habit{
   width: 100%;
   height: 100%;

}
.anaysis_Data_box{
    width: 100%;
    height: 580px;
    margin-bottom: 20px;
}
</style>
